import { Suspense } from 'react'
import { BrowserRouter as Router, Switch, Route, RouteProps } from 'react-router-dom'
import loadable from '@loadable/component'
import { Skeleton } from 'antd'
import Layout from 'component/Layout'
import { History } from 'history'

const routes: RouteProps[] = [
  {
    path: '/login',
    component: loadable(() => import('container/LoginPage')),
  },
  {
    path: '/list',
    component: loadable(() => import('container/ListPage')),
  },
  {
    path: '/todo',
    component: loadable(() => import('container/TodoPage')),
  },
  {
    path: '/',
    component: loadable(() => import('container/HomePage')),
  },
]

function App() {
  return (
    <Suspense fallback={<Skeleton />}>
      <Router>
        <Layout>
          <Switch>
            {routes.map(({ path, component }) => (
              <Route key={path as string} path={path} component={component} />
            ))}
          </Switch>
        </Layout>
      </Router>
    </Suspense>
  )
}

export default App

export function goHome(history: History) {
  history.push('/')
}
